<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>互联网金融贷款平台</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../css/user.css"/>
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script src="../script/user.js" type="text/javascript"></script>
    <script src="../angularjs/vue.js"></script>
    <script src="../angularjs/axios.min.js"></script>
    <!-- 引入样式eleme -->
    <link rel="stylesheet" href="../angularjs/index.css">
    <!-- 引入组件库 -->
    <script src="../angularjs/index.js"></script>
    <!-- bootstarp -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- bootstarp -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        .ui-fileupload-choose {
            background: none;
            width: 90px;
            height: 90px;
            border: 0px none;
        }

        .ui-fileupload-choose input {
            width: 100%;
            height: 100%;
        }

        .ui-icon {
            background: none;
            width: 0px;
            height: 0px;
        }
    </style>

</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">金证信贷系统</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="个人中心首页.html"><span></span>首页</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-user"></span>角色: {{user.nickname}}</a></li>
            <li><a href="javascript:void(0)" @click="logout()"><span class="glyphicon glyphicon-log-in"></span>注销</a>
            </li>
        </ul>

    </div>

    <!--个人中心-->
    <div class="wrapper wbgcolor">
        <div class="w1200 personal">
            <div id="personal-left" class="personal-left">
                <ul>
                    <li class="pleft-cur"><span><a href="个人中心首页.html"><i class="dot dot1"></i>账户总览</a></span></li>
                    <li class=""><span><a href="个人中心-账户设置.html"><i class="dot dot02"></i>账户设置</a> </span></li>
                    <li class=""><span><a href="个人中心-借款记录.html"><i class="dot dot02"></i>查看借款记录</a> </span></li>
                    <li class=""><span><a href="个人中心-查看申请记录.html"><i class="dot dot02"></i>查看申请记录</a> </span></li>
                    <li class=""><span><a href="../applyforaloan.html"><i class="dot dot02"></i>申请贷款</a> </span></li>
                </ul>
            </div>
            <div class="personal-main">
                <div class="pmain-profile">
                    <div class="pmain-welcome">
                    </div>
                    <div class="pmain-user">
                        <div class="user-head"> <span id="clickHeadImage" class="head-img" title="点击更换头像">
            <form method="post" action="">
              <input type="hidden" name="userPhotoUploadForm" value="userPhotoUploadForm">
              <span id="userPhotoUploadForm:photo"><img id="userPhotoUploadForm:photoImage" src="../images/touxiang.png"
                                                        alt="" style="width:88px;height:88px;z-index:0;"> <i
                      class="headframe" style="z-index:0;"></i>-
              <div id="userPhotoUploadForm:shangchuan-btn" class="ui-fileupload ui-widget" style="z-index:0;">
                <div class="ui-fileupload-buttonbar ui-corner-top"><span
                        class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-fileupload-choose"
                        role="button"><span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"></span><span
                        class="ui-button-text ui-c"></span>
                  </span></div>
                <div class="ui-fileupload-content ui-widget-content ui-corner-bottom">
                  <table class="ui-fileupload-files">
                    <tbody>
                    </tbody>
                  </table>
                </div>
              </div>
              </span>
              <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState"
                     value="2696547217205030168:-301641994240890871" autocomplete="off">
            </form>
            </span> <span class="head-icon"> <a href="#"><i title="第三方资金账户未认证" class="headiconbg headicon01"></i></a> <a
                                href="#"><i class="headiconbg headicon2"></i></a> <a href="#"><i
                                class="headiconbg headicon03"></i></a> </span></div>
                        <div style="float: right">
                            <el-link type="primary" data-toggle="modal" data-target="#myModal">修改登录信息</el-link>
                        </div>
                        <div class="user-info user-info1">

                            <ul>
                                <li>昵称<span>{{user.nickname}}</span></li>
                                <li>用户名<span>{{user.phone}}</span></li>

                            </ul>

                        </div>
                    </div>
                    <div class="pmain-money">
                        <ul>
                            <li class="none"><span><em>账户总额</em><i id="zhze" class="markicon"></i><span
                                    class="arrow-show1" style="display:none;">可用余额+待收本息</span><span class="icon-show1"
                                                                                                    style="display:none;"></span></span>
                                <span class="truemoney"><i class="f26 fb">0.00 </i> 元</span></li>
                            <li><span><em>待收本息</em><i id="dsbx" class="markicon"></i><span class="arrow-show2"
                                                                                           style="display:none;">未到账的投资项目的本金、利息总额</span><span
                                    class="icon-show2" style="display:none;"></span></span> <span class="truemoney"><i
                                    class="f26 fb">0.00 </i>元</span></li>
                            <li><span><em>累计收益</em><i id="ljsy" class="markicon"></i><span class="arrow-show3"
                                                                                           style="display: none;">已到账的投资收益+未到账的投资收益</span><span
                                    class="icon-show3" style="display: none;"></span></span> <span class="truemoney"><i
                                    class="f26 fb c-pink">0.00 </i> 元</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>

    <!--模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                    </button>
                    <h3 class="modal-title" id="myModalLabel">
                        修改登录信息
                    </h3>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-hover table-striped table-responsive text-center">
                        <tr>
                            <td>昵称</td>
                            <td><input type="text" v-model="user.nickname"></td>
                        </tr>
                        <tr>
                            <td>手机号</td>
                            <td><input type="text" v-model="user.phone"></td>
                        </tr>
                        <tr>
                            <td>邮箱</td>
                            <td><input type="text" v-model="user.email"></td>
                        </tr>
                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="update()">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

</body>

</html>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            user: {
                token: null,
            }
        },
        methods: {
            open() {
                this.$message.error(vue.Result.msg + ":" + vue.Result.data);
            }, open2() {
                this.$message({
                    message: '修改成功,请重新登录',
                    type: 'success'
                });
            },
            init: function () {
                //初始化方法
                /*axios.post("http://127.0.0.1:10088/user/getUserInRedis?token=" + localStorage.getItem("token")).then(function (response) {
                    vue.user = response.data.data;
                })*/
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/getUserInRedis',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then((response) => {
                    vue.user = response.data.data;
                    console.log(vue.user.nickname)
                    localStorage.setItem("nickname",vue.user.nickname)
                    console.log(localStorage.getItem("nickname"))
                })
            },
            update: function () {
                vue.user.token = localStorage.getItem("token");
                /* axios.post("http://127.0.0.1:10088/user/updateLogin",
                     vue.user
                 ).*/
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/updateLogin',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    data: vue.user
                }).then(function (response) {
                    if (response.data.code == 200) {
                        //修改成功
                        vue.open2();
                        localStorage.removeItem("token")
                        setInterval(() => {
                            location.href = "login.html";
                        }, 1000);
                    } else {
                        //修改失败
                        vue.open();
                    }
                })
            },
            logout: function () {
                //注销
                localStorage.removeItem("token");
                location.href="login.html"
            }
        }

    })
    vue.init();
</script>